<template>
  <div class="link-share-wrapper" v-loading="pageLoading">
    <!--有效连接  -->
    <div class="share-note-wrapper" v-if="validPage && !passFrompwd">
      <div class="content">
        <div class="read-icon">
          <el-icon size="128" color="#c1c8d6">
            <DocumentLock />
          </el-icon>
        </div>
        <div class="read-title">输入笔记分享密码方可访问</div>
        <div class="input-pwd" style="margin-top: 20px">
          <el-form
            ref="formRef"
            style="width: 260px"
            :model="formData"
            label-width="auto"
            class="demo-ruleForm"
          >
            <el-form-item
              label=""
              prop="readPwd"
              :rules="[{ required: true, message: '密码不能为空' }]"
            >
              <div style="display: flex; gap: 10px">
                <el-input
                  v-model="formData.readPwd"
                  type="password"
                  placeholder="请输入分享密码"
                  @keydown.enter.prevent="unlock(formRef)"
                ></el-input>
                <el-button type="primary" @click="unlock(formRef)"
                  >提交
                </el-button>
              </div>
            </el-form-item>
            <el-form-item> </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 有效链接未登录 -->
    <div class="can-access" v-else-if="validPage && passFrompwd">
      <div
        class="header"
        style="
          display: flex;
          align-items: center;
          height: 80px;
          justify-content: space-between;
        "
      >
        <div class="h-left">
          <el-icon color="#409efe" :size="48">
            <Document />
          </el-icon>
          <span> AI笔记分享 | {{ noteTitle }}</span>
        </div>
        <div class="h-right">
          <el-button style="width: 100%" @click="handleToLogin">登录</el-button>
        </div>
      </div>
      <div class="main">
        <div class="left">
          <template v-if="noteType === 'Xmind'">
            <MindMap :data="content" readonly />
          </template>
          <template v-else-if="noteType === 'FlowChart'">
            <Diagram isSilentMode :content="content" />
          </template>
          <template v-else-if="noteType === 'Document'">
            <Editor
              :content="content"
              v-model:title="noteTitle"
              disabled
            ></Editor>
          </template>
        </div>
        <div class="right">
          <div class="share-from" style="display: flex; align-items: center">
            <div class="avatar">
              <el-icon size="48" style="color: var(--el-color-primary)"
                ><UserFilled
              /></el-icon>
            </div>
            <div class="avatar" style="font-weight: 600">
              来自{{ shareAuthorName }}的分享
            </div>
          </div>
          <div class="share-time">
            分享时间：{{ shareTime && new Date(shareTime).toLocaleString() }}
          </div>
        </div>
      </div>
    </div>
    <!-- 无效链接 -->
    <div class="invalid-wrapper" v-else-if="!validPage && !pageLoading">
      <el-icon size="128" color="#537def"><Warning /></el-icon>
      <p>无效分享地址</p>
      <p style="color: #7f7f7f">对方停止分享或该分享不存在</p>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" width="500">
    <div class="login-modal" style="height: 360px">
      <LoginModal @login="login"></LoginModal>
    </div>
  </el-dialog>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { httpValidateShareLink, httpValidateSharePwd } from '@/api/note'
import DocumentLock from '@/icons/DocumentLock.vue'
import Diagram from '@/components/logic-flow-mvp/components/Diagram.vue'
import MindMap from '@/components/mind-map/Index.vue'
import Editor from '@/views/note/components/document.vue'
import { useRouter, useRoute } from 'vue-router'
import useUserStore from '@/stores/user.js'
import LoginModal from './components/LoginModal.vue'
const userStore = useUserStore()
const token = userStore.getToken
const formRef = ref()
const router = useRouter()
const route = useRoute()
const formData = reactive({
  readPwd: '',
})
const validPage = ref(false)
const pageLoading = ref(true)
const passFrompwd = ref(false)
const dialogVisible = ref(false)
const submitLoading = ref(false)
const noteType = ref()
const noteTitle = ref()
const shareAuthorName = ref()
const shareTime = ref()
const content = ref({
  data: {
    text: '根节点',
  },
  children: [],
})
// 去登录
const handleToLogin = () => {
  dialogVisible.value = true
}
const validateShareLinkHasExpired = async () => {
  pageLoading.value = true
  const res = await httpValidateShareLink({
    uu_id: route.query.uid,
    fd_id: parseInt(route.query.id),
  })
  if (res.meta.code == 200) {
    validPage.value = true
  } else {
    validPage.value = false
  }
  pageLoading.value = false
}
validateShareLinkHasExpired()

const unlock = (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      submitLoading.value = true
      const res = await httpValidateSharePwd({
        fd_id: parseInt(route.query.id),
        uu_id: route.query.uid,
        share_password: formData.readPwd,
      })
      if (res.list.length) {
        let result = res.list[0]
        noteType.value = result.icon
        noteTitle.value = result.title
        if (result.icon == 'Document') {
          content.value = result.content
        } else if (result.icon == 'Xmind') {
          content.value = result.content && JSON.parse(result.content)
        } else if (result.icon === 'FlowChart') {
          content.value = result.content && JSON.parse(result.content)
        }
        shareAuthorName.value = result.name
        shareTime.value = result.share_at
        // 判断是否登录
        if (token) {
          router.push('/file/share-edit/' + route.query.id)
        } else {
          passFrompwd.value = true
        }
      }
      submitLoading.value = false
    }
  })
}
const login = async () => {
  dialogVisible.value = false
  const res = await httpValidateSharePwd({
    fd_id: parseInt(route.query.id),
    uu_id: route.query.uid,
    share_password: formData.readPwd,
  })
  if (res) {
    router.push('/file/share-edit/' + route.query.id)
  }
}
</script>
<style scoped lang="scss">
.link-share-wrapper {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.share-note-wrapper {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .content {
    width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .read-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    :deep(.el-divider--vertical) {
      vertical-align: baseline !important;
    }
  }
}
.can-access {
  height: 100vh;
  width: 100%;
  overflow-y: hidden;
  .header {
    padding: 0 20px;
    border-bottom: 1px solid #ccc;
    .h-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .h-right {
      width: 180px;
    }
  }
  .main {
    height: calc(100vh - 80px);
    display: flex;
    .left {
      flex: 1;
      height: 100%;
    }
    .right {
      // width: 260px;
      width: 15%;
      padding: 20px;
      border-left: 1px solid #ccc;
      background-color: #fff;
    }
  }
}
.invalid-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
<style lang="scss">
.share-note-wrapper {
  .el-input__wrapper {
    border-radius: 0;
    border: 1px solid #dcdfe6;
  }
  .el-input__inner {
    border-radius: 0;
  }
  .el-button {
    border-radius: 0;
  }
}
</style>
